<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<%@ taglib tagdir="/WEB-INF/tags" prefix="matrix"%>
<%@ taglib uri="http://matrixcsm.zkingsoft.com" prefix="cms"%>
<cms:ads   code="'img_I7$Gw0',
'ZY_1_1_1',
'ZY_ChanPin_2',
'ZY_ZhiWuTiQuWu_3',
'img_ZBLjm4',
'ZY_RenCan_5',
'ZY_RenCan_6',
'ZY_RenCan_7',
'ZY_ShiPinTianJiaJi_8',
'img_gsrN_9',
'ZY_ShiPin_10',
'ZY_ShiPin_11',
'ZY_BaoJianPinYuanLiao_12',
'img_LA52G13',
'ZY_BaoJianPin_14',
'ZY_QiTa_15',
'img_Nwq4U16',
'img_cq4en17',
'ZY_LingZhiBaoZiYou_18',
'anode_19',
'ZY_LaiYuanLingZhiBao_20',
'img_hlBur21',
'ZY_LingZhiBaoZiYou_22',
'anode_23',
'ZY_LaiYuanLingZhiBao_24',
'img_v3Qxc25',
'ZY_LingZhiBaoZiYou_26',
'anode_27',
'ZY_LaiYuanLingZhiBao_28',
'ZY_29_29',
'ZY_30_30',
'ZY_31_31',
'ZY_32_32'
"  ></cms:ads>
<!doctype html>
<html>
 <head>
  <link rel="icon" sizes="any" href="${浏览器logo}">
  <title>${网页标题}</title>
  <meta charset="UTF-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" href="https://gwfile.csxuncong.com/xxswen/pc/css/swiper.min.css">
  <link rel="stylesheet" href="https://gwfile.csxuncong.com/xxswen/pc/css/animate.css">
  <link rel="stylesheet" href="https://gwfile.csxuncong.com/xxswen/pc/css/common.css">
  <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  <style>
   .mune{

    width: 210px;
    flex: 0 0 210px;
    margin-top: 60px;
    margin-right: 15px;
   }
   .mune .item{
    box-shadow: 0px 3px 10px rgba(47, 55, 47, 0.2);
    margin-bottom: 20px;
    font-size: 16px;
    text-align: center;
   }
   .mune .item .m-header{
    background: #F8F8F8;

    position: relative;
    cursor: pointer;
   }
   .mune .item .m-header.active{
    background: #3EA836;
   }
   .mune .item .m-header .title{
    display: block;
    padding: 18px 0;
    font-size: 17px;
    color: #2F372F;
    font-weight: bold;
   }
   .mune .item .m-header.active .title{
    color: #ffffff;
   }
   .mune .item .m-header img{
    width: 18px;
    position: absolute;
    right: 10px;
    vertical-align: middle;
    top: 23px;
   }
   .mune .item .layout{
    display: none;
    background: #ffffff;
   }
   .mune .item .layout .name{
    line-height: 20px;
    cursor: pointer;
    display: block;
    padding: 20px 4px;
    font-size: 16px;
    color: rgb(47 55 47 / 70%);
    border-bottom: 1px solid rgba(112, 112, 112, 0.2);;
   }
   .mune .item .layout .name.active{
    background: #f8f8f8;
    color: #3EA836;
   }
   .product-list{
    margin: 40px -8px 60px 0;
   }
   .product-list .item{
    width: 50%;
    box-sizing: border-box;
    padding: 20px 10px;
   }
   .product-list .item .img-wrap{
    width: 220px;
    flex: 0 0 220px;
    overflow: hidden;
    padding: 10px;
    box-sizing: border-box;
   }
   .product-list .item img{
    max-width: 100%;
    max-height: 100%;
    display: block;
    -moz-transition: 1s all ease;
    -o-transition: 1s all ease;
    -webkit-transition: 1s all ease;
    transition: 1s all ease;
   }
   .product-list .item .img-wrap:hover img {
    -webkit-transform: scale(1.15);
    -ms-transform: scale(1.15);
    -o-transform: scale(1.15);
    transform: scale(1.15);
   }
   .product-list .item .con{
    /* padding-left: 5px; */
   }
   .product-list .item .con .name{
    color: #3EA836;
    font-size: 20px;
    font-weight: bold;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    line-height: 26px;
   }
   .product-list .item .con .sub-name{
    color: #3EA836;
    font-size: 18px;
    margin-top: 10px;
    border-bottom: 1px solid rgb(62 168 54 / 50%);
    padding-bottom: 5px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    font-style: italic;
   }
   .product-list .item .con .desc{
    margin-top: 20px;
    font-size: 15px;
    color: rgb(47 55 47 / 90%);
    line-height: 28px;
   }
   .product-list .item .con .time{
    font-size: 14px;
    margin-top: 20px;
    color: rgb(47 55 47 / 70%);
   }
  </style>
  <meta name="keywords" content="${网页关键词}">
  <meta name="description" content="${网页描述 }">
 </head> 
 <body> 
  <jsp:include page="_top.jsp"></jsp:include> 
  <div class="crumbs-wrap"> 
   <div class="container"> 
    <a href="index.html"><img src="${img_I7$Gw0.adImg}" alt="" class="zy" data-type="ad" data-id="${img_I7$Gw0.adId}"></a> 
    <span class="zy" data-type="ad" data-id="${ZY_1_1_1.adId}">${ZY_1_1_1.adTitle}</span>
    <a class="active zy" href="${ZY_ChanPin_2.adUrl}" data-type="ad" data-id="${ZY_ChanPin_2.adId}">${ZY_ChanPin_2.adTitle}</a> 
   </div> 
  </div> 
  <div class="container" style="min-height: 500px;">
   <div class="flex align-start"> 
    <div class="mune" id="mune">

     <cms:artType var="cpitem" code="cp"></cms:artType>
     <c:forEach items="${cpitem }" var="artType" varStatus="status" >
      <div class="item">
       <div class="m-header">
        <a class="title zy" href="${path}/do/redirect/pc/product?code=${artType.code}&type=${status.index}">${artType.artTypeName}</a>
        <img src="${img_ZBLjm4.adImg}" class="icon zy" data-type="ad" data-id="${img_ZBLjm4.adId}">
       </div>
       <div class="layout">

        <cms:artType var="sub" code="${artType.code}"></cms:artType>
        <c:forEach items="${sub }" var="subType" varStatus="subStatus" >
         <a class="name zy" href="${path}/do/redirect/pc/product?code=${subType.code}&type=${status.index}">${subType.artTypeName}</a>
        </c:forEach>
       </div>
      </div>
     </c:forEach>
    </div>
    <div class="flex-1"> 
     <div class="product-list flex flex-wrap space-between">
      <cms:arts var="artList" code="${param.code == null ? 'cp' : param.code}" pageNow="${param.pageNow == null ? 0 : param.pageNow }" pageSize="10"></cms:arts>
      <c:forEach items="${artList }" var="art" varStatus="subStatus" >
      <div class="item flex align-center wow animated fadeInUpA">
       <div class="img-wrap flex align-center"> 
        <img src="${art.artImage}" />
       </div> 
       <div class="con"> 
        <h4 class="name zy">${art.artTitle}</h4>
        <h4 class="sub-name zy">${art.artLables}</h4>
        <p class="desc zy">${art.artAbstract}</p>
       </div> 
      </div>
      </c:forEach>
     </div> 
     <div class="pagination">
      <c:forEach end="${recodeCount }" begin="1" var="index" varStatus="count">
       <a class="zy" href="${path }/do/redirect/pc/product?pageNow=${index-1}&type=${param.type}&code=${param.code}">${index}</a>
      </c:forEach>
     </div> 
    </div> 
   </div> 
  </div> 
  <jsp:include page="_footer.jsp"></jsp:include>  
  <script src="https://gwfile.csxuncong.com/xxswen/pc/js/swiper.min.js"></script>
  <script src="https://gwfile.csxuncong.com/xxswen/pc/js/wow.min.js"></script>
  <script>
         window.onload = function(){
            var itemEls = document.getElementsByClassName('nav-item-hover');
            for(var i= 0; i < itemEls.length;i++){
                itemEls[i].onmouseover = function(){
                    var els = this.getElementsByClassName('nav-layout');
                    if(els.length) {
                        els[0].style.display = 'block'
                    };
                }
                itemEls[i].onmouseout = function(){
                    var els = this.getElementsByClassName('nav-layout');
                    if(els.length) {
                        els[0].style.display = 'none'
                    };
                }
            }
            var wow = new WOW({
                boxClass: 'wow',
                animateClass: 'animated',
                offset: 0,
                mobile: true,
                live: true
            });
            wow.init();
            var openContactUsEl = document.getElementById('openContactUs');
            var closeContactUsEl = document.getElementById('closeContactUs');
            var contactUsSildeEl = document.getElementById('contactUsSilde');
            if(openContactUsEl){
                closeContactUsEl.onclick = function () {
                    contactUsSildeEl.style.right = '-124px';
                    closeContactUsEl.style.display = 'none';
                    openContactUsEl.style.display = 'block';
                }
                openContactUsEl.onclick = function () {
                    contactUsSildeEl.style.right = 0;
                    openContactUsEl.style.display = 'none';
                    closeContactUsEl.style.display = 'block';
                }
            }
            // 菜单点击事件
            

            var menuWrapEls = document.getElementById('mune');
            var menuItemEls = menuWrapEls.getElementsByClassName('item');
            var lastEls = null;
            for(var i= 0; i < menuItemEls.length;i++){
                let index = i;
                menuItemEls[i].onclick = muneChange.bind(this, index);
            }

            var type = getQueryVariable('type') || 0;
            muneChange(type)

            function muneChange(index){
                var headerEls = menuItemEls[index].getElementsByClassName('m-header');
                var iconEls = menuItemEls[index].getElementsByClassName('icon');
                var els = menuItemEls[index].getElementsByClassName('layout');
                if(lastEls){
                    lastEls.getElementsByClassName('m-header')[0].className="m-header";
                    lastEls.getElementsByClassName('icon')[0].setAttribute('src','https://gwfile.csxuncong.com/xxswen/pc/./images/icon9.png');
                    var lastLayoutEls = lastEls.getElementsByClassName('layout');
                    if(lastLayoutEls.length) {
                        lastLayoutEls[0].style.display = 'none'
                    };
                }
                headerEls[0].className="m-header active"
                iconEls[0].setAttribute('src','https://gwfile.csxuncong.com/xxswen/pc/./images/icon10.png')
                if(els.length) {
                    els[0].style.display = 'block'
                };
                lastEls = menuItemEls[index];
            }

            function getQueryVariable(variable)
            {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i=0;i<vars.length;i++) {
                        var pair = vars[i].split("=");
                        if(pair[0] == variable){return pair[1];}
                }
                return(false);
            }
         }
    </script> 
 </body>
</html>